<script setup>
import { ref } from "vue";

//example components
import NavbarDefault from "@/examples/navbars/NavbarDefault.vue";
import AllTires from "@/views/components/AllTires.vue";
//images
import vueMkHeader from "@/assets/img/contactUs/header-bg.png";
import contentBg from "@/assets/img/products/badlands/bg.png";

import { faqslist } from "@/api/tires";
let isCollapse = ref(true);
let activeKey = ref(0);
let list = ref([]);

const setActiveKey = (key) => {
    if (activeKey.value == key && isCollapse.value) {
        isCollapse.value = false;
    } else {
        isCollapse.value = true;
        activeKey.value = key;
    }
};

faqslist({ pageNum: 1, pageSize: 999 }).then((res) => {
    list.value = res.data.records;
});

if (translate) {
    translate.listener.start();
    translate.execute();
}
</script>

<template>
    <div class="position-sticky z-index-sticky top-0 w-100">
        <NavbarDefault transparent />
    </div>
    <Header>
        <div class="page-header min-vh-55" :style="`background-image: url(${vueMkHeader})`" loading="lazy">
            <div class="container">
                <div class="row text-center">
                    <div class="col-lg-12">
                        <h1 class="text-f-ERASBD text-white text-title-size uppercase">FAQS</h1>
                    </div>
                </div>
            </div>
        </div>
    </Header>
    <div :style="`background: url(${contentBg});no-repeat top / contain`" class="py-6">
        <div class="container" style="user-select: none">
            <div v-for="(item, index) in list" :key="index">
                <div :class="activeKey == index && isCollapse ? 'box-selected' : ''">
                    <div class="collapse-head mt-4 show-pointer" :class="activeKey == index && isCollapse ? 'bg-red' : 'bg-black'" @click="setActiveKey(index)">
                        <div style="display: flex; align-items: center">
                            <span class="icon iconq text-f-Montserrat-Bold">Q</span><span :class="activeKey == index && isCollapse ? 'text-white' : 'text-black'" class="text-f-ERASBD ms-2 fs-3 item-title uppercase">{{ item.title }}</span>
                        </div>

                        <span>
                            <svg width="30" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <polygon v-if="activeKey == index && isCollapse" points="30,20 0,20 15,0" fill="white" fill-rule="evenodd" />
                                <polygon v-else points="0,0 30,0 15,20" fill="black" fill-rule="evenodd" />
                            </svg>
                        </span>
                    </div>
                </div>

                <div v-if="activeKey == index && isCollapse" class="collapse-content py-3" style="display: flex">
                    <div><span class="icon icona text-f-Montserrat-Bold">A</span></div>
                    <div class="ms-2 text-f-Montserrat-Regular text-black vhtml" style="font-size: 1.2rem" v-html="item.content"></div>
                </div>
            </div>
        </div>
    </div>

    <AllTires />
</template>
<style scoped>
.box-item {
    width: 100%;
    height: 6rem;
    background: #000;
    border-radius: 3rem;
}
.box-selected {
    background: linear-gradient(to top, white 0%, white 50%, #f3f3f300 50.01%, #f3f3f300 100%);
}
.bg-red {
    background: #ed1c24;
}
.bg-black {
    background: #fff;
    border: 1px solid #d4d4d4;
}
.collapse-head {
    display: flex;
    /* flex-flow: row nowrap; */
    align-items: center;
    justify-content: space-between;
    height: 4.4rem;
    border-radius: 2.2rem;
    overflow: hidden;
    z-index: 1;
    padding: 0 3rem;
}

.collapse-title {
    /* font-size: 14px; */
    color: #fff;
}
.collapse-content {
    background: #fff;
    border-radius: 0 0 1rem 1rem;
    padding: 0 3rem;
}
.icon {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 1.25rem;
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}
.iconq {
    background: #000;
}
.icona {
    background: #ef333a;
}
@media (max-width: 991.98px) {
    .collapse-head {
        font-size: 1rem !important;
        line-height: 1.2rem !important;
        height: 6.2rem;
        border-radius: 1rem;
        padding: 0 1rem;
    }
    .collapse-content {
        padding: 0 1rem;
    }
}
</style>
